<template>
  <div class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="故障编码" prop="code">
          <!--          <el-input v-model="formData.code" placeholder="请输入" clearable />-->
          <CodeRuleInput :band-value.sync="formData.code" table-name="device_repair_library" column-name="code" :is-edit="id" />
        </el-form-item>
        <el-form-item label="故障名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="故障类型" prop="repairTypeId" class="clickChoose">
          <el-input v-model="formData.repairTypeName" placeholder="请选择" readonly />
          <!--          <el-select v-model="formData.repairTypeId" filterable clearable placeholder="请选择">-->
          <!--            <el-option-->
          <!--              v-for="item in userOptions"-->
          <!--              :key="item.repairTypeId"-->
          <!--              :label="item.repairTypeName"-->
          <!--              :value="item.repairTypeId"-->
          <!--            />-->
          <!--          </el-select>-->
          <a class="clickChoose_button" @click.prevent="addType">
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="适用设备" prop="applyDevice">
          <div class="add-input">
            <el-select v-model="formData.applyDevice" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in userOptions1"
                :key="item.id"
                :label="item.deviceName"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="故障原因" class="double" prop="reason">
          <el-input v-model="formData.reason" type="textarea" placeholder="请输入" clearable maxlength="500" show-word-limit />
        </el-form-item>
        <el-form-item label="故障描述" class="double" prop="description">
          <el-input v-model="formData.description" type="textarea" placeholder="请输入" maxlength="500" show-word-limit />
        </el-form-item>
        <el-form-item label="解决方案" class="double" prop="solution">
          <el-input v-model="formData.solution" type="textarea" placeholder="请输入" maxlength="500" show-word-limit />
        </el-form-item>
        <el-form-item label="预防对策" class="double" prop="precautionPolicy">
          <el-input v-model="formData.precautionPolicy" type="textarea" placeholder="请输入" maxlength="500" show-word-limit />
        </el-form-item>
        <el-form-item label="附件" class="FileManageFull">
          <FileManageFull
            :file-names="formData.fileName"
            :file-real-names="formData.fileRealName"
            :file-urls="formData.fileUrl"
            :row-index="1"
            @fileName="setFileName"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo, errorTypelist, equipmetConfiglist } from '@/api/equipmentManage/equipmentRepair/repairKnowledge'
import addErrorType from '../errorType/addErrorType'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        code: undefined,
        name: undefined,
        roleIdsArray: undefined,
        roleIds: undefined,
        repairTypeId: undefined,
        applyDevice: undefined,
        reason: undefined,
        description: undefined,
        solution: undefined,
        precautionPolicy: undefined,
        fileName: '',
        fileRealName: '',
        fileUrl: '',
        repairTypeName: undefined
      },
      pageData: {
        pageNum: 1,
        pageSize: 9999,
        orderByColumn: 'updateTime',
        isAsc: 'desc',
        status: 1
      },
      roleOptions: [],
      userOptions: [],
      userOptions1: [],
      rules: {
        name: [
          { required: true, message: '故障名称不能为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '故障编码不能为空', trigger: 'blur' }
        ],
        repairTypeId: [
          { required: true, message: '故障类型不能为空', trigger: 'change' }
        ],
        applyDevice: [
          { required: true, message: '适用设备不能为空', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '故障原因不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getErrotType()
    this.getEquipmetConfiglist()
    if (!this.id) { // 没有id就是新增
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.formData.roleIdsArray = this.formData.roleIds
      })
    },
    getErrotType() { // 获取故障类型数据
      errorTypelist(this.pageData).then(res => {
        this.userOptions = res.data
        console.log(this.userOptions)
      })
    },
    getEquipmetConfiglist() {
      equipmetConfiglist(this.pageData).then(res => {
        this.userOptions1 = res.data
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.roleIds = this.formData.roleIdsArray
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    addType() { // 打开故障类型详情弹窗
      this.$layer.iframe({// 弹框
        content: {
          content: addErrorType, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            typeId: this.formData.repairTypeId ? this.formData.repairTypeId : ''
          }// props
        },
        area: ['800px', '592px'],
        title: '请选择故障类型', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    addErrorType(row) { // 设备类型弹窗关闭后赋值
      this.formData.repairTypeId = row.id
      this.formData.repairTypeName = row.name
    },
    setFileName(...data) {
      this.formData.fileName = data[0]
      this.formData.fileRealName = data[1]
      this.formData.fileUrl = data[2]
    }
  }
}
</script>

<style lang="less" scoped>
.main_main{
  padding-top: 10px;
}
.FileManageFull {
  width: 100% !important;
}
/deep/ .file_operate_tag {
  margin-left: 20px !important;
}
</style>
